<template>
    <div class="management-outliers">
        <div class="exception-top">
          <a-form-model layout="inline" :model="page" :colon="false" style="width:80%">
            <a-form-model-item label="字典分类">
              <a-tree-select v-model="page.id" :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                             :tree-data="treeData" placeholder="请选择字典类型" :replaceFields="replaceFields"
                             style="width:180px" tree-default-expand-all></a-tree-select>
            </a-form-model-item>
            <a-form-model-item label="字典名称">
              <a-input v-model="page.name" placeholder="请输入字典名称"/>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="selectFn">搜索</a-button>
            </a-form-model-item>

          </a-form-model>
            <a-button type="primary" @click="()=>{title = '新增字典';addPop =true;}">添加</a-button>
        </div>
        <div class="exception-content">
            <my-table :data-source="tableData" :pagination="false" rowKey="id" childrenColumnName="dictionaryInfoPoList"  :scroll="{ y:'62vh' }">
                <!--                <a-table-column title="id" data-index="id" align="center" :ellipsis="true"/>-->
                <a-table-column title="字典名称" data-index="name" align="left" :ellipsis="true" />
                <a-table-column title="是否启用" data-index="isEnable" align="center" :ellipsis="true" />
                <a-table-column title="操作" align="center" width="200px">
                    <template slot-scope="text,record">
                        <div class="handle">
                            <a-button size="small" type="primary" @click="editFn(record)">修改</a-button>
                            <a-button size="small" type="danger" @click="delFn(record.id)">删除</a-button>
                        </div>
                    </template>
                </a-table-column>
            </my-table>
        </div>
        <div class="exception-bottom clearfix">
            <div class="page-box">
                <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" hideOnSinglePage :item-render="itemRender" @change="pagechangeFn" />
            </div>
        </div>
        <!-- 添加弹框 -->
        <a-modal v-model="addPop" width="50%" :title="title" centered @cancel="()=>form = {}" :maskClosable="false">
            <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
                <a-form-model-item label="字典分类">
                    <a-tree-select v-model="form.parentId" :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }" :tree-data="treeData1" placeholder="请选择字典类型" :replaceFields="replaceFields"></a-tree-select>
                </a-form-model-item>
                <a-form-model-item label="字典名字">
                    <a-input v-model="form.name" />
                </a-form-model-item>
                <a-form-model-item label="是否启用" prop="isEnable">
                    <a-switch v-model="form.isEnable" />
                </a-form-model-item>

            </a-form-model>

            <template slot="footer">
                <a-button type="primary" @click="SubmitFn">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
export default {
    name: "outliers",
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
            replaceFields: {
                // 树形字段改变
                title: "name",
                value: "id",
                children: "dictionaryInfoPoList",
            },
            treeData: [],
            treeData1: [],
            title: "",
            addPop: false,
            page: {
                id: -1,
                current: 1,
                size: 10,
                name: "",
            },
            total: 0,
            dictionaryList: [],
            tableData: [],
            form: {
                // 弹窗添加表单数据
                name: "",
                id: "",
                isEnable: true,
                parentId: "",
            },
        };
    },
    methods: {
        selectFn() {
            // 搜索按钮
            console.log(this.page);
            this.page.current = 1;
            this.getData();
        },
        editFn(data) {
            console.log(data);
            this.title = "修改字典";
            this.form = data;
            this.addPop = true;
        },
        delFn(id) {
            let _that = this;
            this.$confirm({
                title: "是否确认删除",
                onOk() {
                    _that.$api.delDictionary(id).then((res) => {
                        if (res.data.data == true) {
                            _that.$message.info("数据删除成功!");
                            _that.getData();
                        } else {
                            _that.$message.info(res.data.errorMessage);
                        }
                    });
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "delk",
            });
        },
        SubmitFn() {
            // 弹窗提交按钮
            if (this.title == "新增字典") {
                this.form.sex = parseInt(this.form.sex);
                this.$api.addDictionary(this.form).then((res) => {
                    console.log(res);
                    if (res.data.code == 0) {
                        this.$message.info("添加成功!");
                        this.addPop = false;
                        this.form = {};
                        this.getData();
                    }
                });
            } else {
                this.$api.editDictionary(this.form).then((res) => {
                    if (res.data.code == 0) {
                        this.addPop = false;
                        this.$message.info("修改成功!");
                        this.getData();
                    }
                });
            }
        },
        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a> 上一页 </a>;
            } else if (type === "next") {
                return <a> 下一页 </a>;
            }
            return originalElement;
        },
        pagechangeFn(page) {
            this.page.current = page;
            this.getData();
        },
        // 数据获取方法
        getTreeData() {
            // 获取树形结构
            this.$api
                .getDictionaryList({ id: -1, current: 1, size: 10000 })
                .then((res) => {
                    if (res.data.code == 0) {
                        console.log(res.data.data);
                        this.treeData = res.data.data;
                        this.treeData1 = res.data.data;

                        this.treeData1.unshift({
                            id: "-1",
                            name: "最高",
                            isEnable: true,
                            parentId: "-1",
                            dictionaryInfoPoList: [],
                        });
                    }
                });
        },
        getData() {
            this.$api.getDictionaryList(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
    },
    mounted() {
        console.log(this.$user);
        this.getData();
        this.getTreeData();
    },
};
</script>

<style lang="scss" scoped>
::v-deep .ant-table-body{
  margin-top: 20px;
}
.management-outliers {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;

    .exception-top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .addBtn {
            background-color: #189580;
            border: 1px solid #189580;
        }
    }

    .exception-content {
        width: 100%;
        height: calc(94% - 60px);
        .handle {
            display: flex;
            justify-content: space-around;
        }
    }

    .exception-bottom {
        width: 100%;

        .page-box {
            float: right;
        }
    }
}
// 表格加号背景
::v-deep .ant-table-row-expand-icon {
    background: #deefff;
}
::v-deep .ant-table-tbody > tr > td {
    padding: 14px 16px;
    overflow-wrap: break-word;
}
</style>
